<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sse流式输出演示</title>
    <style>
        .container{
            width: 100vw;
            height: 100vh;
            background: #e5fd01;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #result{
            width: 50vw;
            height: 50vh;
            margin: auto;
            background: #ffffff;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="result"></div>
    <div><button onclick="handleClose()">关闭连接</button></div>
</div>
</body>
<script>
    let result =document.getElementById('result')
    let source = new EventSource('http://localhost:8080/sse/connect')
    //连接打开
    source.onopen = () => console.log("open")
    //连接错误
    source.onerror = error => console.log("error:"+error)
    //关闭连接
    function handleClose(){
        source.close()
    }
    //接收数据
    source.onmessage = event => {
        console.log("recived message:"+event)
        result.innerHTML = '<p>'+event.data+'</p>'
    }
</script>
</html>
